<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
/* .fileInput{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    clear: both;
    display: block;
    margin: auto;
    background-color: red;
} */
    </style>
</head>
<body>
    <!-- <input type="file" accept="image/*" capture="user"> -->
    <div class="aui-info">
        <img src="imgs/txbk.png" id="img-txz"  style="width: 100px;height: 100px" class="aui-img-round user-img"/>
        <input type="file"
        id="file-txz" name="file" onchange="upload('#file-txz', '#img-txz');"  class="fileInput"  value="" />
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="js/compressor.js"></script>
<script>

    var upload = function (c, d) {
    "use strict";
    var $c = document.querySelector(c),
        $d = document.querySelector(d),
        file = $c.files[0];
        if (!file) {
            return;
        }
        var formData = new FormData();
        formData.append("file",file);  //上传一个files对象
        console.log(formData)


        $.ajax({//jQuery方法，此处可以换成其它请求方式
            url: 'https://httpbin.org/post',
            // dataType: "json",
            type: "post",
            data: formData, 
            processData: false,//不去处理发送的数据
            contentType: false,//不去设置Content-Type请求头
            error: function (res) {
                console.log(res,'success');
                return;
            },
            success: function (res) {
              console.log(res,'error');
                return;
            }
          })



     
        new Compressor(file, {
            quality: 0.6,
            maxWidth:300,
            maxHeight:300,
            success(result) {
                var formData = new FormData();
                formData.append('upload', result);
                console.log(formData,'11',result)
                // blog=result;
                var reader = new FileReader();

                reader.readAsDataURL(result);
                reader.onload = function (e) {
                    $d.setAttribute("src", e.target.result);
                };
            },
            error(err) {
                console.log(err.message);
            },
        });
};
// 参数详解
// - strict: true, 严格的语法模式
// - checkOrientation: true, 检查图片的方向
// - quality: 0.8, 默认压缩质量
// - maxWidth:300, maxHeight:300, 我觉得头像没必要超过300px
// - convertSize: 5000000, png图片如果超过了这个数值，被转换成JPEGs。
</script>
</html>